<template>
  <!--
    https://element-plus.org/zh-CN/component/config-provider.html
    namespace: 命名框架，默认el
    locale: 语言
    message: 消息设置，
      message.max: 可同时显示的消息最大数量
    size: 全局组件大小

    配置配置：todo: 需要持续观察 value-on-clear 配置为空串的影响
    empty-values: 配置组件的默认空值，默认是['', null, undefined]
    value-on-clear: 设置清空选项的值，默认是undefined；这里配置为''，是为了符合服务端接口的update selective语义，传递空串用于清空对应字段。
    支持的组件：
      Cascader 级联选择器
      DatePicker 日期选择器
      Select 选择器
      SelectV2 选择器
      TimePicker 时间选择器
      TimeSelect 时间选择
      TreeSelect 树形选择
  -->
  <el-config-provider
    :namespace="variables.elNamespace"
    :locale="currentLocale.elLocale"
    :message="{ max: 5 }"
    :size="size"
    :value-on-clear="''"
  >
    <slot></slot>
  </el-config-provider>
</template>

<script setup lang="ts">
import { provide, computed, watch, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { ComponentSize } from 'element-plus'
import { useLocaleStore } from '@/stores/modules/locale'
import { useWindowSize } from '@vueuse/core'
import { useAppStore } from '@/stores/modules/app'
import { setCssVar } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'

// css变量
const { variables } = useDesign()

const appStore = useAppStore()

const props = defineProps({
  size: propTypes.oneOf<ComponentSize>(['default', 'small', 'large']).def('default')
})

// 提供依赖数据，子组件通过inject注入获取，而不用一层一层通过props传递
provide('configGlobal', props)

// 初始化主题样式
onMounted(() => {
  appStore.setCssVarTheme()
})

// 窗口尺寸 {width: Ref<number>, height: Ref<number>}
const { width } = useWindowSize()

// 监视窗口尺寸变化
watch(
  () => width.value,
  (width: number) => {
    if (width < 768) {
      // 切换到手机模式
      !appStore.getMobile ? appStore.setMobile(true) : undefined
      setCssVar('--left-menu-min-width', '0')
      // 折叠菜单
      appStore.setCollapse(true)
      // 手机模式只支持经典布局
      appStore.getLayout !== 'classic' ? appStore.setLayout('classic') : undefined
    } else {
      // 退出手机模式
      appStore.getMobile ? appStore.setMobile(false) : undefined
      setCssVar('--left-menu-min-width', '64px')
    }
  },
  { immediate: true }
)

// 多语言
const localeStore = useLocaleStore()
const currentLocale = computed(() => localeStore.getCurrentLocale)
</script>
